<!--
*@Author: QWP
*@Description: 用户考勤操作
*@Date: 2024-07-08 09:51:28
-->
<template>
  <a-layout class="f-h-100">
    <a-layout-header style="padding: 0; background-color: #F0F2F5; height: auto">
      <ApplcantCheckCard :column="5"
        style="background: unset; padding: 0"
        :itemStyle="{ padding: '16px', borderRadius: '16px', margin: 0, background: '#fff' }"/>
    </a-layout-header>
    <a-layout-content class="f-padding-10">
      <a-row :gutter="12" class="f-h-100">
        <a-col :span="12">
          <u-card title="审核中">
            <template #extra>
              <a-button type="link" @click="viewMore">查看更多</a-button>
            </template>
            <u-table :columns="qjColumns"
              :data="qjTabData">
            </u-table>
          </u-card>
        </a-col>
        <a-col :span="12">
          <u-card title="已通过">
            <u-table :columns="jbColumns"
              :data="jbTabData">
            </u-table>
          </u-card>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch, CSSProperties } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave} from "vue-router";
import { _IFormEl } from "@/components/common/form/interface";
import { ColProps, FormItemProps, TableColumnProps, Tag } from "ant-design-vue";
import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { numberC } from '@/util/common'
import { formatAmt, } from '@/util/format.ts'
import dayjs from "dayjs";
import { cloneDeep } from 'lodash'
import { Item } from "ant-design-vue/es/menu";
import ApplcantCheckCard from '@/views/oa/personnel/myCheckIn/ApplicantCard.vue'
import MyVacation from '@/views/oa/personnel/myCheckIn/MyVacation.vue'

const route = useRoute();
const router = useRouter();

onMounted(() => {
})

// 审核中列表
const showVacat = ref<boolean>(false)
const qjTabData = reactive([
  { a: "研发部门", b: "丁艳玲", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '已通过'
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '已通过'  
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '被驳回'  
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '被驳回'  
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '已通过'  
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '被驳回'  
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '已通过'  
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '已通过'  
  },
]);
let qjColumns: Array<TableColumnProps> = reactive([
  // { dataIndex: "a", title: "录入时间", width: 100 },
  { dataIndex: "b2", title: "业务类型", width: 150 },
  { dataIndex: "jbr", title: "开始时间", width: 150 },
  { dataIndex: "lrsj", title: "结束时间", width: 150 },
  { dataIndex: "jremark", title: "事由", width: 150 },
  { dataIndex: "fj", title: "附件", width: 100 },
  { dataIndex: "zt", title: "状态", width: 100,
    customRender: ({text}) => {
      return h(Tag, { 
        color: text == '已通过' ? 'rgba(82,196,26,0.2)' : 'rgba(245,34,45,0.2)',
        style: { color: text == '已通过' ? '#52C41A ' : '#F5222D'} 
      }, text)
    }
  },
]);

// 已通过列表
const showOvertime = ref<boolean>(false)
const jbTabData = reactive([
  { a: "研发部门", b: "丁艳玲", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '已通过'
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '已通过'  
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '已通过'  
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '已通过'  
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '已通过'  
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '已通过'  
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '已通过'  
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
    zt: '已通过'  
  },
]);
let jbColumns: Array<TableColumnProps> = reactive([
  { dataIndex: "b2", title: "录入时间", width: 150 },
  { dataIndex: "lrsj", title: "开始时间", width: 150 },
  { dataIndex: "jbr", title: "结束时间", width: 150 },
  { dataIndex: "remark", title: "事由", width: 150 },
  { dataIndex: "zt", title: "状态", width: 150,
    customRender: ({text}) => {
      return h(Tag, { 
        color: text == '已通过' ? 'rgba(82,196,26,0.2)' : 'rgba(245,34,45,0.2)',
        style: { color: text == '已通过' ? '#52C41A ' : '#F5222D'} 
      }, text)
    }
  },
]);

const viewMore = () => {
  router.push({
    path: '/TransitIndex/MyAllApplicant',
    query: {
      _tab: '1'
    }
  })
}


</script>

<style lang="scss">
.u-tx-bg {
  background-color: #E7F4FF !important
}
.u-bq-bg {
  background-color: #FDEAD6 !important;
  border-color: #FA8C16 !important;
}
.u-kqrl-title {
  position: absolute;
  top: 16px;
  left: 18px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #303133;
}
.u-myapplicant-item {
  padding-left: 10px;
  border-left: 3px solid #1890FF ;
}
</style>
